<template>
  <md-nav-bar title="A豆记录"></md-nav-bar>
  <view class="adou-container">
    <!-- 顶部卡片 -->
    <view class="card">
      <view class="card-info">
        <view class="card-title">剩余A豆</view>
        <view class="card-adou">
          <image
            class="adou-icon"
            src="https://cdn.xmxiaomai.com/isong_static/my/Group%203.png"
            mode="widthFix"></image>
          <text class="adou-num">{{ data.point }}</text>
        </view>
      </view>
      <button class="recharge-btn" @click="onRecharge">充值</button>
    </view>

    <!-- A豆流水列表 -->
    <view class="list">
      <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :safearea="true" bottom="80px">
        <view v-for="item in data.list" :key="item.id" class="list-item">
          <view class="item-left">
            <image
              class="icon-bg"
              :src="
                item.point >= 0
                  ? 'https://cdn.xmxiaomai.com/isong_static/my/Combined%20Shape.png'
                  : 'https://cdn.xmxiaomai.com/isong_static/my/Combined%20Shape%282%29.png'
              "
              mode="widthFix"></image>
          </view>
          <view class="item-main">
            <view class="item-date">{{ item.createTime }}</view>
            <view class="item-title">{{ item.title }}</view>
          </view>
          <view class="item-right">
            <view class="item-amount" :class="item.point >= 0 ? 'add' : 'sub'">
              {{ item.point >= 0 ? '+' : '' }}{{ item.point }}
            </view>
            <view class="item-balance">剩余 {{ item.totalPoint }}</view>
          </view>
        </view>
      </mescroll-body>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app';
// 组件
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
// 接口
import api from '@/api/index';
import type { User } from '@/api/data';

const data = reactive({
  list: [] as User.PointPage.List[],
  canReset: false,
  point: 0,
});

// 充值
function onRecharge() {
  uni.navigateTo({
    url: `/pages/sub/my/rechargePage`,
  });
}

/**
 * 接口相关
 */
// 分页处理
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
const upCallback = async (mescroll: any) => {
  try {
    let res = await api.User.pointPage({
      pageNo: mescroll.num,
      pageSize: mescroll.size,
    });
    const curPageData = res?.data?.record?.list || []; // 当前页数据
    data.point = res.data.pointNum;
    if (mescroll.num == 1) data.list = []; // 第一页需手动制空列表
    data.list = data.list.concat(curPageData); //追加新数据
    mescroll.endByPage(curPageData.length, res?.data?.record?.total || 0);
  } catch (e) {
    //TODO handle the exception
    mescroll.endErr(); // 请求失败, 结束加载
  }
};

onShow(() => {
  data.canReset && getMescroll().resetUpScroll(); // 重置列表数据为第一页
  data.canReset && getMescroll().scrollTo(0, 0); // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题
  data.canReset = true; // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
});
</script>

<style lang="scss" scoped>
.adou-container {
  min-height: 100vh;
  background: #fafcfa;
  padding-bottom: 32rpx;
}
.card {
  margin: 32rpx 24rpx 0 24rpx;
  background: linear-gradient(135deg, #2ca88a 0%, #0b5e4a 100%);
  border-radius: 40rpx;
  padding: 40rpx 36rpx 36rpx 36rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.card-info {
  display: flex;
  flex-direction: column;
  color: #fff;
}
.card-title {
  font-size: 28rpx;
  opacity: 0.9;
  margin-bottom: 8rpx;
}
.card-adou {
  display: flex;
  align-items: center;
}
.adou-icon {
  font-size: 38rpx;
  margin-right: 8rpx;
  width: 27rpx;
  height: 33.75rpx;
}
.adou-num {
  font-size: 48rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
}
.recharge-btn {
  position: absolute;
  right: 36rpx;
  top: 50%;
  transform: translateY(-50%);
  background: #ffe7b2;
  color: #b88a2a;
  font-size: 30rpx;
  border-radius: 40rpx;
  padding: 0 40rpx;
  height: 64rpx;
  line-height: 64rpx;
  font-weight: 500;
  border: none;
  box-shadow: none;
}
.list {
  margin: 0 0 0 0;
  margin-top: 24rpx;
}
.list-item {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 0;
  border-bottom: 1rpx solid #f0f0f0;
  padding: 28rpx 24rpx 18rpx 24rpx;
}
.item-left {
  margin-right: 18rpx;
  margin-top: 8rpx;
}
.icon-bg {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.item-date {
  font-size: 24rpx;
  color: #bbb;
  margin-bottom: 4rpx;
}
.item-title {
  font-size: 30rpx;
  color: #222;
  font-weight: 500;
}
.item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 120rpx;
  margin-left: 12rpx;
}
.item-amount {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 4rpx;
}
.item-amount.add {
  color: #1fa37a;
}
.item-amount.sub {
  color: #222;
  opacity: 0.7;
}
.item-balance {
  font-size: 24rpx;
  color: #bbb;
}
</style>
